<template>
	<div id="app">
		<app-nav></app-nav>
		<router-view></router-view>
		<app-footer></app-footer>
		<vm-back-top class="top"></vm-back-top>
	</div>
</template>

<script lang="ts">
import VmBackTop from "vue-multiple-back-top";
import { defineComponent } from "@vue/composition-api";
import appNav from "./components/nav.vue";
import appFooter from "./components/footer.vue";
import { getCurrentConfig } from "./utils/hooks";
import { getAllData } from "./utils/axios";
export default defineComponent({
	name: "app",
	components: {
		appNav,
		appFooter,
		VmBackTop,
	},
	setup(props, ctx) {
		const { index } = getCurrentConfig(ctx);
		if (ctx.root.$route.query.index !== String(index.value)) {
			ctx.root.$router.push({ query: { index: String(index.value) } });
		}

		getAllData(ctx);
	},
});
</script>

<style>
.mu-card .mu-card-title {
	text-align: center;
}

.top {
	background-color: rgb(33, 150, 243, 255) !important;
	border-radius: 20px !important;
}

.vm-back-top-inner {
	background-color: rgb(33, 150, 243, 255) !important;
	border-radius: 20px !important;
}
</style>
